<template>
    <div>
        <h2>Axios  模拟请求json-server 数据 </h2>
        <h2>word --- {{word}}</h2>
        <button @click="getList">获取list </button>
        <div>
            <h4 v-for="(l,i) in list" :key='i'>
                {{l}}
            </h4>
        </div>
        <div>
            <h2>用户列表</h2>
            <ul>
                <li v-for="(l,i) in user" :key='i'>
                    名字:{{l.username}} / 年龄: {{l.age}} 
                    <button @click="deleteOne(l,i)"   >删除</button>
                    <button @click="updateOne(l,i)">修改</button>
                </li>
            </ul>
            <h2>添加用户</h2>
            <p>
                <input type="text" v-model="form.username" placeholder="请输入名字">
            </p>
            <p>
                <input type="text" v-model.number ="form.age" placeholder="请输入年龄">
            </p>
            <p> <button @click="adduser">添加</button></p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:2114/"  // 接口的服务器路径 
export default {
    data(){
        return {
            word:'hello - world ',
            list:[],
            user:[],
            form:{}
        }
    },
    created(){
        this.getUser()
    },
    methods:{
        updateOne(l,i){
            let value = window.prompt(i,l.username)
            console.log(value)
            if(value!=null){
                // $.ajax({
                //     url:"http://localhost:2114/user/"+l.id,
                //     type:"PATCH",
                //     data:{
                //         username:value 
                //     },
                //     success:res=>{
                //         l.username = value;
                //         this.user.splice(i,1,l);
                //     }
                // })
                axios({
                    url:'/user/'+l.id,
                    method:"patch",
                    data:{
                        username:value
                    }
                })
                .then(res=>{
                    l.username = value;
                    this.user.splice(i,1,l)
                })
            }
        },
        deleteOne(l,i){
            // $.ajax({
            //     url:"http://localhost:2114/user/"+l.id,
            //     type:"delete",  // 请求方式
            //     success:res=>{
            //         this.user.splice(i,1);
            //     }
            // })
            axios({
                url:'/user/'+l.id,
                method:"delete",
            })
            .then(res=>{
                 this.user.splice(i,1);
            })
        },
        getUser(){
            // $.ajax({
            //     url:"http://localhost:2114/user",
            //     type:"get",
            //     success:res=>{
            //         console.log(res)
            //         this.user = res 
            //     }
            // })
            axios({
                url:"/user",
                method:"GET",
            })
            .then(res=>{
                this.user = res.data 
            })
        },
        adduser(){
            if(this.form.username){
               

                // $.post("http://localhost:2114/user",this.form)
                // .then(res=>{
                //     this.form = {}
                //     this.getUser()
                // })
                // axios({
                //     url:"/user",
                //     data:{
                //         ...this.form
                //     },
                //     method:"POST"
                // })
                // .then(res=>{
                //     this.form = {}
                //     this.getUser()
                // })

                axios.post("/user",this.form)
                .then(res=>{
                    this.form = {}
                    this.getUser()
                })
            }else{
                alert("请输入用户名")
            }
        },
        getList(){
            // axios({
            //     url:"/list",
            //     method:"GET",
            // }).then(res=>{
            //     console.log(res)
            //     this.list = res.data 
            // })
            axios.get("/list")
            .then(res=>{
                this.list = res.data 
            })
        }
    },
    mounted(){
        // 增删改查  
       
        

        // axios 基于promise 
        axios({
            url:"/test",
            method:"GET",
        })
        .then(res=>{
            console.log(res)
            this.word = res.data[1]
        })
        .catch(err=>{
            console.log(err)
        })
    }
}
</script>